import { receivedType } from '@/types';
import { ProFormText } from '@ant-design/pro-components';
import { useMount } from 'ahooks';
import { Button, Flex, Upload } from 'antd';
import { useEffect, useRef, useState } from 'react';

const SceneModal = ({ data }: { data: { data: receivedType } }) => {
  // 在这里可以访问传递的数据
  const receivedData: receivedType = data.data;
  const preview = useRef(null);
  useMount(() => {
    async function init() {
      const setupPreview = async () => {
        if (!preview.current) return;
        const { width, height, x, y } = preview.current.getBoundingClientRect();
        const result = await window.tm?.ipcRenderer.invoke(
          'preview-init-child',
          {
            width,
            height,
            x,
            y,
          },
        );
        preview.style = `flex-basis:${result.height}px!important`;
        return result;
      };

      async function resizePreview() {
        const previewContainer = preview.current;
        if (!previewContainer) return;
        const { width, height, x, y } =
          previewContainer.getBoundingClientRect();
        const result = await window.tm!.ipcRenderer.invoke(
          'preview-bounds-child',
          {
            width,
            height,
            x,
            y,
          },
        );
        previewContainer.style = `flex-basis:${result.height}px!important`;
      }

      const previewSize = await setupPreview();
      if (previewSize) {
        preview.current.innerHTML = '';
      }
      const ro = new ResizeObserver(resizePreview);
      if (preview) {
        ro.observe(preview.current);
      }
    }
    init();
  });

  const [imagePath, setImagePath] = useState('');

  const submit = async (value: string) => {
    const updateData = {
      sceneName: receivedData.sceneName,
      name: receivedData.name,
      updateSettings: {
        file: value,
      },
    };
    console.log('updateSourceSettings', updateData);
    const result = await window.tm?.ipcRenderer.invoke(
      'updateSourceSettings',
      updateData,
    );
    console.log('result', result);
  };
  const getSourceSettings = async () => {
    const result = await window.tm?.ipcRenderer.invoke('getSourceSettings', {
      sceneName: receivedData.sceneName,
      name: receivedData.name,
    });
    if (typeof result.settings.file !== 'object') {
      setImagePath(result.settings.file);
    } else {
      setImagePath('');
    }
  };
  useEffect(() => {
    getSourceSettings();
  }, []);

  const closeDynamicView = async () => {
    await window.tm?.ipcRenderer.invoke('closeObsModal');
  };
  const dynamicView = async (path) => {
    await window.tm?.ipcRenderer.invoke('showObsModal', {
      path: path,
    });
  };
  return (
    <Flex
      gap="middle"
      vertical
      style={{ height: '100%', backgroundColor: '#2e477e' }}
    >
      <div id="preview" ref={preview} className={'preview'}>
        <div
          style={{
            minWidth: '50%',
            maxWidth: '100%',
            height: '100%',
            textAlign: 'center',
            backgroundColor: '#000000',
          }}
        ></div>
      </div>
      <div
        style={{
          width: '100%',
          display: 'flex',
          justifyContent: 'center',
          flex: '1 1 auto',
          overflowY: 'auto',
        }}
      >
        <div style={{ width: '100%', display: 'flex', flexDirection: 'row' }}>
          <div
            style={{ width: '25%', display: 'flex', justifyContent: 'center' }}
          >
            <span>图像文件</span>
          </div>
          <div style={{ width: '100%', display: 'flex', flexDirection: 'row' }}>
            <div style={{ width: '80%' }}>
              <ProFormText
                name="text"
                placeholder="请输入名称"
                fieldProps={{
                  readOnly: true,
                  type: 'input',
                  value: imagePath,
                }}
              />
            </div>
            <div>
              <Upload
                maxCount={1}
                showUploadList={false}
                onChange={async (e) => {
                  const filePath = e.file.originFileObj.path;
                  // const newFile = await window.tm?.ipcRenderer.invoke(
                  //   'saveImg',
                  //   filePath,
                  // );
                  setImagePath(filePath);
                  submit(filePath);
                }}
              >
                <Button>浏览</Button>
              </Upload>
            </div>
          </div>
        </div>
      </div>
      <div
        style={{
          width: '100%',
          height: '40px',
          display: 'flex',
          justifyContent: 'flex-end',
          backgroundColor: '#1c295a',
          alignItems: 'center',
        }}
      >
        <Button
          type={'primary'}
          style={{ marginRight: '20px', backgroundColor: '#293d76' }}
          onClick={async () => {
            await closeDynamicView();
          }}
        >
          取消
        </Button>
        <Button
          type={'primary'}
          style={{ marginRight: '20px', backgroundColor: '#293d76' }}
          onClick={async () => {
            await closeDynamicView();
            // await dynamicView("/ObsManager/fontModal/fontAttributeDataOriginModal");
          }}
        >
          添加源
        </Button>
      </div>
    </Flex>
  );
};

export default SceneModal;
